$(function () {
    function ajax(url, data) {
        return new Promise((resolve, reject) => {
            $.ajax({
                url: url,
                success(data) {
                    resolve(data);
                },
                error(data) {
                    reject(data);
                },
            });
        });
    }
    /////////////////////////////////////////////////////////////
    getData();
    async function getData() {
        var data = await ajax("data/hero.json", null);
        var { code: heroCode, data: hero } = data;
        if (heroCode == 200) {
            var list = "";
            for (item of hero) {
                list += item["id"]
            }
            try {
                var heroRes = await ajax("data/hero_price.json", list);
            } catch (e) {
                e.printStackTrace();
            }
            var { code: heropriceCode, data: heroPrice } = heroRes;
            if (heropriceCode == 200) {
                var lis = "";
                for (item of hero) {
                    $.extend(item, heroPrice[item["id"]]);
                    lis += `
                     <li>
                         <a href='###' class='img'><img src='${item["img"]}' alt=''><span class='mask'></span><span class='name'>${item["name"]}</span><span class='coin'>${item["coin"]}</span><span class='diamond'>${item["diamond"]}</span></a>
                         <a href='###' class='buy'>购买</a>
                     </li>
                 `;
                }
                ul = "<ul>" + lis + "</ul>";
                $(".con").html(ul);
            }

        }

    }
});



















// 弹窗小组件
(function () {
    this.buyDialog = {
        init(options = {}) {
            if ($(".dialog_con").length) {
                this.update(options);
            } else {
                this.create(options);
            }
        },
        create(options) {
            let { img, name, coin, diamond } = options;
            let html = `
            <div class="dialog_bg"></div>
            <div class="dialog_con">
                <div class="dialog_tit">购买英雄  <span onclick="buyDialog.close()"></span></div>
                <div class="l">
                    <img src="${img}" alt="" class="img">
                    <span class="mask"></span>
                    <span class="name">${name}</span>
                </div>
                <div class="r">
                    <div class="coin"><span>金币</span> <em>${coin}</em></div>
                    <div class="diamond"><span>钻石</span> <em>${diamond}</em></div>
                    <div class="btn">
                        <a href="javascript:;" class="btn_coin" onclick="alert('金币不足~');buyDialog.close()">金币购买</a>
                        <a href="javascript:;" class="btn_diamond" onclick="alert('砖石不足~');buyDialog.close()">砖石购买</a>
                    </div>
                </div>
            </div>
        `;
            $(".main").append(html);

            this.open();
        },
        update(options) {
            let { img, name, coin, diamond } = options;
            $(".img", ".dialog_con").attr("src", img);
            $(".name", ".dialog_con").text(name);
            $("em", ".dialog_con .coin").text(coin);
            $("em", ".dialog_con .diamond").text(diamond);

            this.open();
        },
        open() {
            $(".dialog_con,.dialog_bg").show();
        },
        close() {
            $(".dialog_con,.dialog_bg").hide();
        }
    }
})();